//引入样式
require('../less/sportsdata.less')

//引入样式
require('../fonts/iconfont.css')





//文档加载事件
document.ready(function () {



    //获取元素
    const getBack = document.querySelector('#getBack')//返回上一级按钮
    const succession = document.querySelector('#succession')//持续天数(周)
    const allSports = document.querySelector('#allSports')//累计时间
    const accumulated = document.querySelector('#accumulated')//累计天数
    const consume = document.querySelector('#consume')//卡路里
    const consumes = document.querySelector('#consumes')//卡路里


    //点击返回上一页
    getBack.addEventListener('click', function () {
        location.href = './mine.html'
    })


    //柱状图表
    function Bor(xData, sData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#bar'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '近7天运动时长',
                top: 15,
                left: 15
            },
            grid: {
                top: 50,
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: sData,
                type: 'bar'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    Bor()

    //pie饼状图
    function pie(sdata) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#pie'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '运动分类',
                left: 15,
                top: 15
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                top: 'middle',
                left: 15
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: sdata,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        normal: {
                            formatter: '{d}%',
                            position: 'inner'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    pie()

    //堆叠条形图
    function SHber() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#SHbar'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // Use axis to trigger tooltip
                    type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            legend: {
                data: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Mail Ad',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Affiliate Ad',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ad',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [150, 212, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Search Engine',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [820, 832, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    SHber()


    //折线图
    function line() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector('#line'));

        // 指定图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
    line()

    let id = localStorage.getItem('userId')
    //发请求
    $http.get(`/sport/data/${id}`, function (res) {

        if (res.status === 0) {
            console.log(res); 

            //柱状图 - 处理数据
            const dateArr = res.data.days.map(function (item) {
                return item.date.substr(5)
            })
            const sportAllTimeArr = res.data.days.map(function (item) {
                return item.dayTimes
            })
            Bor(dateArr, sportAllTimeArr)


            //饼图 - 处理数据

            //定义对象保存运动数据
            const sportData = {
                '跑步': 0,
                '骑行': 0,
                '训练': 0
            }

            const sportDataColor = {
                '跑步': 'red',
                '骑行': 'orange',
                '训练': 'pink'
            }



            res.data.days.forEach(function (item) {
                item.exerciseData.forEach(function (v) {
                    //v: 代表每次运动
                    sportData[v.type] += +v.time
                })
            })

            //定义数组
            const sportArr = []

            //遍历sportData
            for (const key in sportData) {
                sportArr.push({
                    value: sportData[key],
                    name: key,
                    itemStyle: {
                        color: sportDataColor[key]
                    }
                })
            }

            pie(sportArr)

            //渲染持续天数(周)
            succession.textContent=res.data.continueDays
            

            //总时间
            allSports.textContent=res.data.sumTimes

            //累积天数
            accumulated.textContent=res.data.sumDays

            //计算卡路里以及渲染
            consume.textContent=until.calCalorie(res.data.sumTimes);
            consumes.textContent=until.calCalorie(res.data.sumTimes);
             

        }
    })

})
